<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>page_action关键字</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/marked_css.css" />
		<link rel="stylesheet" href="../../css/obsidian-theme.css">
		<link rel="stylesheet" href="../../css/element_UI.css">
		<link rel="stylesheet" href="../../css/public-nav-tructure.css">
		<script src="../../javaScript/vue.js"></script>
		<script src="../../javaScript/jquery-3.4.1.js"></script>
		<script src="../../javaScript/marked.min.js"></script>
		<script src="../../javaScript/prettify.js"></script>
		<script src="../../javaScript/element_UI.js"></script>
		<script src="../../javaScript/clipboard.min.js"></script>
		<script src="../../javaScript/cp.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- markedDown -->
			<div class="marked-box">
				<el-row>
					<el-col :span="24">
						<!-- 顶部面包屑 -->
						<div class="marked-breadcrumb-box">
							<el-breadcrumb separator="/">
								<el-breadcrumb-item><a @click="go_to_page">关键字</a></el-breadcrumb-item>
								<el-breadcrumb-item>框架原生关键字方法 (page_Action)</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</el-col>
					<el-col :span="5">
						<!-- 左侧导航 -->
						<div class="marked-nav-box">
							<el-menu :default-active="activeIndex" class="el-menu-demo" mode="vertical" @select="horizontal">
								<el-submenu index="key" v-for="(value, key, index) in fist_nav" :key="index" :index="key">
									<template slot="title">{{key}}</template>
									<el-menu-item index="item" v-for="item in fist_nav[key]" :index="item">
										<img src="../../images/function.png" alt="" class="nav-item-icon">
										{{item}}
									</el-menu-item>
								</el-submenu>
							</el-menu>
						</div>
					</el-col>
					<el-col :span="19">
						<!-- 中间内容 -->
						<div class="marked-content-box" v-html="md"></div>
					</el-col>
				</el-row>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						activeIndex: "time_sleep()关键字",
						md: null,
						fist_nav: {},
						file_value: {}
					}
				},
				created() {
					var that = this;
					// 数据分段，导航生成
					that.get_ajax("../../md/page_action/pageAction关键字.md");
					// 检测是否有传入数据
					var date = that.get_frame_url();
					if (date) {that.activeIndex = date;};
				},
				// 生命周期钩子-挂载后执行
				mounted() {
					var that = this;
					that.this_ajax(that.activeIndex);
				},
				methods:{
					// 导航按钮点击
					horizontal(key) {
						var that = this;
						console.log(key);
						that.this_ajax(key);
					},
					get_ajax(src){
						var that = this;
						$.ajax({
							type: "get",
							url: src,
							dataType: "html",
							async: false,
							success: function(res){
								var res_new = res.split("***");
								for (item in res_new){
									let regex = /.*?## (.*?).*?\n###/sg;
									let regex_t = /### (.*?) 关键字.*?\n/sg;
									var value = res_new[item].match(regex);
									var value_t = res_new[item].match(regex_t);
									if (value_t) {that.file_value[that.data_rinse(value_t[0])] = res_new[item];}
									if (value){
										content = that.data_rinse(value[0])
										that.fist_nav[content] = [];
										if (value_t){that.fist_nav[content].push(that.data_rinse(value_t[0]));}
									}else{
										if (value_t){that.fist_nav[content].push(that.data_rinse(value_t[0]));}
									}
								}
							}
						});
					},
					this_ajax(key) {
						var that = this;
						var reg = new RegExp("<pre", "g");
						var content = that.md = marked.parse(that.file_value[key]);
						var str = content.replace(reg, "<pre class='prettyprint linenums'");
						that.md = str.replace(/<h2 id=.*?>.*?h2>/, "");
						$(function(){
							var copy_text_array = [];
							var pres = $("pre");
							if (pres.length) {
								pres.each(function() {
									var that = this;
									var copy_text = $(that).find("code").text();
									copy_text_array.push(copy_text)
								})
							}
							prettyPrint();
							$.fn.copy_init(copy_text_array);
						})
					},
					data_rinse(value) {
						var that = this;
						var that_value = value.replace(/[\'\"\\\/\b\f\n\r\t]/g, '');
						var that_value = that_value.replace(/[# ]/g, '');
						return that_value;
					},
					go_to_page(){
						window.location.href = "./index.html"
					},
					get_frame_url() {
						var reg = new RegExp("[^\?&]?" + encodeURI(name) + "=[^&]+");
						var arr = window.parent.document.getElementById("Ateon-SetParent-iframe").contentWindow.location.search.match(reg);
						if (arr != null) {
							return decodeURI(arr[0].substring(arr[0].search("=") + 1));
						};
						return "";
					}
				}
			})
		</script>
	</body>

</html>